<template>
  <div class="liveWhole">
    <div class="title">{{liveData.menuName}}</div>
    <!-- <div :class="tab">
      <a-radio-group :value="size" @change="handleSizeChange">
        <a-radio-button
          style="width: 140px; height: 36px; border-radius: 10px 0px 0px 10px"
          value="operationRoom"
          >手术间直播</a-radio-button
        >
        <a-radio-button
          class="bor"
          style="width: 140px; height: 36px;"
          value="inpatientWard"
          >床房监护直播</a-radio-button
        >
        <a-radio-button
          class="bor"
          style="width: 140px; height: 36px; border-radius: 0px 10px 10px 0px"
          value="playback"
          >直播回放</a-radio-button
        >
      </a-radio-group>
    </div> -->
    <operationRoom v-show="operShow"></operationRoom>
    <inpatientWard v-show="inpaShow"></inpatientWard>
  </div>
</template>

<script>
import operationRoom from "./components/operationRoom.vue";
import inpatientWard from "./components/inpatientWard.vue";
export default {
  components: {
    operationRoom,
    inpatientWard,
  },
  data() {
    return {
      tab:"tab",
      size: "operationRoom",
      operShow: false,
      inpaShow: false,
      liveData:[]
    };
  },
  mounted(){
    let _this = this;
    this.liveData = JSON.parse(sessionStorage.getItem('liveData'));
    if(_this.size == "operationRoom") {
      _this.operShow = true;
    }else {
      _this.operShow = false;
    }
    window.Event.$on("menuLeft", val => {
      _this.menuLeft = val;
      if (_this.menuLeft != "menuDeaDolour") {
        _this.tab='tab';
      } else if (_this.menuLeft == "menuDeaDolour") {
        _this.tab='tab1';
      }
    });
    // _this.menuLeft1 = _this.$store.state.menuLeft;
    _this.menuLeft1 = sessionStorage.getItem('menuLeft')
    if (_this.menuLeft1 != "menuDeaDolour") {
      _this.tab='tab';
    } else if (_this.menuLeft1 == "menuDeaDolour") {
      _this.tab='tab1';
    }
  },
  methods: {
    handleSizeChange(e) {
      console.log(e)
      this.size = e.target.value;
      if (this.size == "operationRoom") {
        this.operShow = true;
      } else {
        this.operShow = false;
      }
      if (this.size == "inpatientWard") {
        this.inpaShow = true;
      } else {
        this.inpaShow = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.liveWhole {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  .title {
    font-size: 18px;
    color: #4d4d4d;
    line-height: 50px;
    margin-left: 30px;
  }
}
</style>
<style>
.liveWhole .ant-radio-group {
  margin-left: 30px !important;
}
.liveWhole .tab .ant-radio-button-wrapper {
  width: 140px !important;
  height: 36px !important;
  font-size: 16px !important;
  color: #0078b6 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  font-size: 16px !important;
  border: 1px solid #0078b6 !important;
  line-height: 36px !important;
}
.liveWhole .tab1 .ant-radio-button-wrapper {
  width: 140px !important;
  height: 36px !important;
  font-size: 16px !important;
  color: #2091bd !important;
  background: rgba(255, 255, 255, 0.5) !important;
  font-size: 16px !important;
  border: 1px solid #2091bd !important;
  line-height: 36px !important;
}
.liveWhole .bor.ant-radio-button-wrapper {
  border-left: 0 !important;
}
.liveWhole .tab
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  background: #0078b6 !important;
  color: #fff !important;
}
.liveWhole .tab1
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  background: #2091bd !important;
  color: #fff !important;
}
.liveWhole .ant-radio-button-wrapper:not(:first-child)::before {
  background: none !important;
}
</style>